<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head">
  <!--<title></title>-->
</head>
<body th:inline="javascript">

<!--导航-->
<nav th:replace="_fragments :: menu(6)"></nav>

<!--中间内容-->
<div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
  <div class="ui container">
    <div class="ui  attached padded segment">

      <h2 class="ui center aligned header" th:text="${video.name}"></h2>
      <br>
      <!--中间主要内容部分-->
      <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" th:utext="${video.content}">
      </div>

      <!--标签-->
      <div class="m-padded-lr-responsive">
        <div class="ui basic teal left pointing label" th:text="${video.tag}"></div>
      </div>

      <!--赞赏-->
      <!--<div th:if="${blog.appreciation}">-->
        <div class="ui center aligned basic segment">
          <button id="payButton" class="ui orange basic circular button">赞赏</button>
        </div>
        <div class="ui payQR flowing popup transition hidden">
          <div class="ui orange basic label">
            <div class="ui images" style="font-size: inherit !important;">
              <div class="image">
                <img th:src="@{/images/alipay.png}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>支付宝</div>
              </div>
              <div class="image">
                <img th:src="@{/images/wechatpay.png}" alt="" class="ui rounded bordered image" style="width: 120px">
                <div>微信</div>
              </div>
            </div>
          </div>
        </div>
      <!--</div>-->

    </div>
  </div>
</div>


<div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
  <ol class="js-toc">

  </ol>
</div>

<div id="qrcode" class="ui wechat-qr flowing popup transition hidden "style="width: 130px !important;">
  <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">-->
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--/*/</th:block>/*/-->


<script th:inline="javascript">

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#payButton').popup({
        popup : $('.payQR.popup'),
        on : 'click',
        position: 'bottom center'
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
    });

    $('.toc.button').popup({
        popup : $('.toc-container.popup'),
        on : 'click',
        position: 'left center'
    });

    $('.wechat').popup({
        popup : $('.wechat-qr'),
        position: 'left center'
    });

    var serurl = "blog.5icodai.com";
    var url = /*[[@{/videos/{id}(id=${video.id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl+url,
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });

    $('#toTop-button').click(function () {
        $(window).scrollTo(0,500);
    });


    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if (direction == 'down') {
                $('#toolbar').show(100);
            } else {
                $('#toolbar').hide(500);
            }
            console.log('Scrolled to waypoint!  ' + direction);
        }
    })

</script>
<script>
    window.onload = function () {
        document.title = [[${title}]];
    }
</script>
</body>
</html>